<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客服账号</title>

    <link rel="stylesheet" href="__STYLE__/layim/css/layui.css">
    <style>
        html{background-color: #333;}
    </style>
</head>
<body>

<script src="__STYLE__/layim/layui.js"></script>
<script src="__STYLE__/webim/md5.js"></script>
<script src="__STYLE__/webim/WebIMConfig.js"></script>
<script src="__STYLE__/webim/websdk3.1.4.js"></script>
<script>

    if(!/^http(s*):\/\//.test(location.href)){
        //alert('请部署到localhost上查看该演示');
    }

    var myUserId="{$customer_service_member['id']}";
    var myUserName="{$customer_service_member['nickname']}";
    var myAvatar="{$customer_service_member['avatar']}";

    layui.use('layim', function(layim){
        WebIM.config=webimconfig;
        WebIM.conn = new WebIM.connection({
            appKey: "{$easemob['app_key']}",
            isHttpDNS: WebIM.config.isHttpDNS,
            isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
            host: WebIM.config.Host,
            https: WebIM.config.https,
            url: WebIM.config.xmppURL,
            apiUrl: WebIM.config.apiURL,
            isAutoLogin: false,
            heartBeatWait: WebIM.config.heartBeatWait,
            autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
            autoReconnectInterval: WebIM.config.autoReconnectInterval,
            isStropheLog: WebIM.config.isStropheLog,
            delivery: WebIM.config.delivery
        });
        //注册IM 回调
        WebIM.conn.listen({
            onOpened: function (message) {          //连接成功回调
                console.log("[opened] 连接已成功建立", "color: green");
            },
            onClosed: function (message) {
                console.log("hx退出登陆");

            },         //连接关闭回调
            onTextMessage: async function (message) {
                console.log('收到文本消息: ', message);
                im.defineMessage(message,'Text');
            },    //收到文本消息
            onEmojiMessage: function (message) {
                console.log('onEmojiMessage: ', message);
            },   //收到表情消息
            onPictureMessage: function (message) {
                console.log('onPicMessage: ', message);
                im.defineMessage(message,'Picture');
            }, //收到图片消息
            onCmdMessage: function (message) {
                console.log('onCmdMessage: ', message);
            },     //收到命令消息
            onAudioMessage: function (message) {
            },   //收到音频消息
            onLocationMessage: function (message) {
                console.log('onLocMessage: ', message);
                // rthis.sendChatLocalNotify(message);
                // rthis.hx_savemsg(message);
            },//收到位置消息
            onFileMessage: function (message) {
                console.log('onFileMessage: ', message);
            },    //收到文件消息
            recallMessage: function (message) {
                console.log('recallMessage', message);
            }, //消息撤回
            onVideoMessage: function (message) {
            },   //收到视频消息
            onPresence: function (message) {

            },       //处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
            onRoster: function (message) {
            },         //处理好友申请
            onInviteMessage: function (message) {
                console.log('Invite');
            },  //处理群组邀请
            onOnline: function () {
                console.log("onOnline");
            },                  //本机网络连接成功
            onOffline: function () {
                console.log('offline');
            },                 //本机网络掉线
            onError: function (message) {
                console.log('onError: ', message);

            },          //失败回调
            onBlacklistUpdate: function (list) {       //黑名单变动
                                                       // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
                console.log(list);
            },
            onReceivedMessage: function (message) {
                console.log('onReceivedMessage: ', message);
            },    //收到消息送达服务器回执
            onDeliveredMessage: function (message) {
                console.log('onDeliveredMessage：', message);
            },   //收到消息送达客户端回执
            onReadMessage: function (message) {
                console.log('onReadMessage: ', message);
            },        //收到消息已读回执
            onCreateGroup: function (message) {
                console.log('onCreateGroup: ', message);
            },        //创建群组成功回执（需调用createGroupNew）
            onMutedMessage: function (message) {
                console.log('onMutedMessage: ', message);
            }         //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
        });
        //登录hx
        var options = {
            apiUrl: WebIM.config.apiURL,
            user: myUserId,
            pwd: md5(myUserId+"aawwff"),
            appKey: WebIM.config.appkey
        };
        WebIM.conn.open(options);

        var im = {
            //自定义消息，把消息格式定义为layim的消息类型
            defineMessage: function (message,msgType) {
                var msg;
                switch (msgType)
                {
                    case 'Text': msg = message.data;break;
                    case 'Picture': msg = 'img['+message.url+']';break;
                    // case 'Audio': msg = 'audio['+message.audio+']';break;
                    // case 'File': msg = 'file('+message.url+')['+message.filename+']';break;
                    // case 'Video': msg = 'video['+message.video+']';break;
                };

                if (message.type == 'chat') {
                    var type = 'friend';
                    var id = message.from;
                }
                if (message.delay){
                    var timestamp = Date.parse(new Date(message.delay));
                }else{
                    var timestamp = (new Date()).valueOf();
                }
                var data = {mine: false,cid: 0,username:message.ext.nickname,avatar:message.ext.avatar,content:msg,id:id,fromid: message.from,timestamp:timestamp,type:type}
                if (!message.ext.cmd) {layim.getMessage(data); };

            },
            sendMsg: function (data) {  //根据layim提供的data数据，进行解析
                var id = WebIM.conn.getUniqueId();
                var content = data.mine.content;

                if(/(^img\[)|(\]$)/g.test(content)) return; //图片消息就环信这里不发了


                var msg = new WebIM.message('txt', id);    // 创建文本消息

                msg.set({
                    msg: content,
                    to: data.to.id,
                    roomType: false,
                    ext:{
                        type: 0,
                        // msg_type:9,
                        nickname:data.mine.username,
                        avatar:data.mine.avatar
                    },
                    success: function (id, serverMsgId){
                        var sendData = {to:data.to.id,content:content,sendTime: data.mine.timestamp,type:data.to.type};
                    },
                    fail:function(e){
                        layer.msg('发送失败 刷新页面试试！');
                    }
                });
                if (data.to.id == data.mine.id){
                    layer.msg('不能给自己发送消息');
                    return;
                }
                if (data.to.cmd){
                    msg.body.ext.cmd = data.to.cmd;
                }
                WebIM.conn.send(msg.body);
            },
            getChatLog: function (data){

            }

        };



//基础配置
        layim.config({

            //初始化接口
            // init: {
            //     url: '__STYLE__/layim/demo_json/getList.json'
            //     ,data: {}
            // }

            //或采用以下方式初始化接口
            init: {
                mine: {
                    "username": myUserName //我的昵称
                    ,"id": myUserId //我的ID
                    ,"status": "online" //在线状态 online：在线、hide：隐身
                    ,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
                    ,"avatar": myAvatar
                }
                ,friend: []
                ,group: []
            }

            //上传图片接口
            ,uploadImage: {
                url: '/admin/file/sendCustomerServiceImg' //（返回的数据格式见下文） //直接发送完毕图片包括环信消息
                ,type: '' //默认post
            }

            // //上传文件接口
            // ,uploadFile: {
            //     url: '/upload/file' //（返回的数据格式见下文）
            //     ,type: '' //默认post
            // }
            ,initSkin: '5.jpg' //1-5 设置初始背景
            ,isfriend: false //是否开启好友
            ,isgroup: false //是否开启群组
            ,isAudio:false
            ,isVideo:false
            ,notice: true //是否开启桌面消息提醒，默认false
            // ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
            ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可

        });

        //演示自动回复
        var autoReplay = [
            '您好，我现在有事不在，一会再和您联系。',
            '你没发错吧？face[微笑] ',
            '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
            '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
            'face[威武] face[威武] face[威武] face[威武] ',
            '<（@￣︶￣@）>',
            '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
            'face[黑线]  你慢慢说，别急……',
            '(*^__^*) face[嘻嘻] ，是贤心吗？'
        ];

        //监听在线状态的切换事件
        layim.on('online', function(data){
            console.log(data);
        });

        //监听签名修改
        layim.on('sign', function(value){
            console.log(value);
        });

        //监听layim建立就绪
        layim.on('ready', function(res){
            // layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
        });

        //监听发送消息
        layim.on('sendMessage', function(data){
            // console.log('发送消息');

            im.sendMsg(data);
        });

        //监听聊天窗口的切换
        layim.on('chatChange', function(res){
        });
    });
</script>
</body>
</html>
